<!--  -->
<template>
  <div class="category-container">
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="商品分类"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <van-icon name="search" color="#ffffff" size="24" />
      </template>
      <template #right>
        <van-icon name="scan" color="#ffffff" size="24" />
      </template>
    </van-nav-bar>
    <div class="content">
      <!-- 左边侧边栏 -->
      <div class="left-con">
        <van-sidebar v-model="activeKey" v-if="categoryData.length">
          <van-sidebar-item
            :title="item.cat_name"
            v-for="item in categoryData"
            :key="item.cat_id"
          />
        </van-sidebar>
      </div>
      <!-- 右侧商品分类列表 -->
      <div class="right-con" v-if="categoryData.length">
        <div
          class="first-level"
          v-for="(item, index) in categoryData"
          :key="item.cat_id"
          v-if="activeKey === index"
        >
          <div
            class="second-level"
            v-for="subItem in item.children"
            :key="subItem.cat_id"
          >
            <div class="title t-a-c" v-if="subItem.children && subItem.children.length">/ {{ subItem.cat_name }} /</div>
            <ul class="third-level">

              <li v-for="thirdItem in subItem.children" :key="thirdItem.cat_id" @click="toGoodList(thirdItem.cat_name)">
                <img :src="thirdItem.cat_icon" :alt="thirdItem.cat_name" />
                <span>{{thirdItem.cat_name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
     <!-- 底部tabbar -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import { Sidebar, SidebarItem, NavBar, Icon } from "vant";
import { getCategory } from "@/network/category";
import tabbar from '@/components/tabbar/tabbar.vue';
export default {
  data() {
    return {
      //当前选中项
      activeKey: 0,
      //分类页面所有数据
      categoryData: [],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getCategoryData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  components: {
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    tabbar
  },
  methods: {
    //点击头部左侧
    onClickLeft() {
      this.$router.push("Search");
    },
    //点击头部右侧
    onClickRight() {
      console.log("点击右侧");
    },
    //去商品列表页
    toGoodList(type){
      this.$router.push({name:'List',query:{type}})
    },
    //获取分类页面数据
    async getCategoryData() {
      const res = await getCategory();
      if (res.message.length) {
        this.categoryData = res.message;
      }
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.category-container {
  padding-top: 46px;
  padding-bottom: 56px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.category-container >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.content {
  display: flex;
}
.content > div {
  height: calc(100vh - 102px);
  overflow: scroll;
}
/* 左侧侧边栏 */
.van-sidebar {
  width: 100px;
}
.van-sidebar-item {
  display: flex;
  align-items: center;
  height: 50px;
}
.van-sidebar-item--select {
  color: #ee0a24;
}
.van-sidebar-item--select::before {
  height: 50px;
}
.category-container >>> .van-sidebar-item__text {
  font-size: 16px;
}
/* 右侧列表 */
.content .right-con {
  flex: 1;
  font-size: 16px;
}
.content .right-con .second-level .title {
  font-size: 20px;
  margin: 16px 0;
}
.content .right-con .third-level {
  display: flex;
  flex-wrap: wrap;
}
.content .right-con .third-level li {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:33.3333%;
  margin-bottom: 16px;
}
.content .right-con .third-level li img {
  width: 50px;
}
.content .right-con .third-level li span{
  margin-top: 10px;
  font-size: 14px;
}
</style>